<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新建用户</title>
</head>
<body>
    <div th:fragment="main" id="addUser" class="addUser">
        <style>
            .content {
                position: relative;
                width: auto;
            }
            .addUser {
                margin: 5px;
                padding: 0 15px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: #fff;
                border: 1px solid #eaeaea;
                border-radius: 5px;
                overflow: auto;
                box-shadow: 0px 1px 5px #333;
            }
            .addUser .title {
                padding: 18px 0px 10px;
                height: 65px;
                border-bottom: 1px solid #DDD;
                font-size: 14px;
            }
            .addUser .title .title-content {
                margin: 0;
                padding: 5px 10px;
                list-style: none;
                color: #000;
                background-color: #fff;
                border-radius: 0;
                border-left: 2px solid #88B7E0; 
            }
            .addUser .title .title-content li>a {
                color: #000;
            }
            .addUser .title .title-content li>a:hover {
                color: #88B7E0;
            }
            .alert-info {
                padding: 8px 12px;
                margin-top: 16px;
                border: 1px solid transparent;
                border-radius: 0px;
                color: #555;
                background-color: #F9F9F9;
                border-color: #DDD;
            }
            .alert-info b {
                color: #337ab7;
            }
            .alert-info span i {
                color:#F00;
            }
            .userinfo {
                margin-top: 40px;
                font-size: 14px;
            }
            .userinfo .form-group {
                margin-bottom: 30px;
            }
            .userinfo .text-title {
                color: #F00;
            } 
            .userinfo .footer {
                margin-top: 35px;
            }
            .userinfo .save {
                margin-right: 10px;
            }

            .form-control[readonly] {
                background-color: #fff;
                font-size: 14px;
            }

            /*返回按钮  */
            .back { 
                display: inline-block;
                float: right;
                position: relative;
                margin-right: 10px; 
                width: 40px; 
                height: 28px; 
                line-height: 28px; 
                text-align: center; 
                color: #fff;
                background: #337ab7; 
                border: 1px solid #337ab7; 
                border-left: none;
                border-radius: 5px;  
            }
            .back:after{ 
                position: absolute; 
                content: " "; 
                border: transparent 13px solid;  
                border-width:  12px 8px; 
                border-right-color: #337ab7; 
                top: 1px; 
                left: -15px; 
                height: 0; 
                width: 0; 
            }
            .back:hover {
                background: #286090; 
            }
            .back:hover:after {
                border-right-color: #286090;
            }
            /*ztree样式  */
            ul.ztree {
                margin-top: 0;
                width:99.9%;
                height:200px;
                border: 1px solid #617775;
                background: #f0f6e4;
                overflow-y:scroll;
                overflow-x:auto;
            }

            /*多选框样式  */
            .roles {
                padding: 0;
                border: none;
                width: 100% !important;
                height: 34px;
            }
            .roles button {
                border: 1px solid #c2cad8; 
                height: 34px;
            }
            .roles button div {
                top: 3px;
                color: #000;
            }
            .roles .ms-drop {
                margin-top: 0px;
            }
            .roles .ms-choice span {
                padding-top: 5px;
                padding-left: 10px;
            }
            .roles .ms-choice > span.placeholder {
                color: #555;
                padding-left: 18px;
                padding-top: 4px;
            }
            .roles .ms-drop input[type="checkbox"] {
                vertical-align: top;
                margin-right: 6px;
            }
        </style>
        <div class="title">
            <ol class="breadcrumb title-content pull-left">
                <li><a href="#platform-userGroup-user">用户管理</a></li>
                <li>新建用户</li>
            </ol>
            <a href="#platform-userGroup-user" class="back">返回</a>
        </div>
        <div class="alert-info">
            <b>提醒：</b>
            <span class="alert-content">以下所填信息中，带&nbsp;<i>*</i>&nbsp;的为必填项，其它为选填项。</span>
        </div>
        <div class="userinfo">
            <form action="" class="form-horizontal col-xs-offset-2" id="add_form">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户登录名</label>
                    <div class="col-sm-5">
                        <input name="username" type="text" class="form-control input-sm" id="userName" maxlength="25">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;登录密码</label>
                    <div class="col-sm-5">
                        <input name="password" type="password" class="form-control input-sm" autocomplete="new-password" id="passWord" maxlength="50">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户名</label>
                    <div class="col-sm-5">
                        <input name="displayName" type="text" class="form-control input-sm" id="displayName" maxlength="25">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户类型</label>
                    <div class="col-sm-5">
                        <select class="form-control" name="authType" id="authType">
                            <option value="" disabled selected>-- 选择用户类型 --</option>
                            <option value="1">系统管理员</option>
                            <option value="2">区域管理员</option>
                            <option value="3">普通用户</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户头衔</label>
                    <div class="col-sm-5">
                        <input name="title" type="text" class="form-control input-sm" id="userTitle" maxlength="25">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-xs-3 control-label"><span class="text-title">*</span>&nbsp;所属组织机构</label>
                    <div class="col-xs-5">
                        <input id="organizationName" type="text" class="form-control input-sm" style="position:relative;" readonly onclick="toggle();">
                        <div id="menuContent" class="col-xs-12 menuContent" style="display:none; position: absolute;z-index:999;">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">角色类型</label>
                    <div class="col-sm-5">
                        <select class="form-control roles" id="roles" multiple="multiple">
                            <!-- 多选选项 -->
                        </select>
                    </div>
                </div>
                <div class="form-group footer">
                    <div class="col-xs-8">
                        <input type="button" value="取消" class="btn btn-default pull-right cancel" id="cancel">
                        <input type="button" value="保存" class="btn btn-primary pull-right save" id="save">
                    </div>                          
                </div>
            </form>
        </div>
        <script>
            var orgData; // 组织机构数据变量
            // 组织机构树形结构
            var setting = {
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                }
            };
            // 页面加载完成获取zTree数据
            $(document).ready(getZtree());
            // zTree加载数据
            function getZtree(){
                $('#add_form')[0].reset();
                $.ajax({
                    url: contextPath + "/Organization/queryOrganizationTree",
                    type: "get",
                    cache: false,
                    dataType: "json",
                    success: function(data){
                        zNodes = data;
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    },
                    error: function(data){
                        toastr.error("请求失败，请稍后再试!");
                    }
                });
            }
            // zTree点击事件
            function onClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes(),
                v = "";
                orgData = nodes[0];
                nodes.sort(function compare(a,b){return a.id-b.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    v += nodes[i].name + ",";
                }
                if (v.length > 0 ) v = v.substring(0, v.length-1);
                var cityObj = $("#organizationName");
                cityObj.attr("value", v);
                cityObj.val(v);
            }
            function toggle() {
                var menuContent = $("#menuContent");
                if(menuContent.css("display") == 'none'){
                    $("#menuContent").css({left:0 + "px", top:31 + "px"}).slideDown("fast");
                    $("body").bind("mousedown", onBodyDown);
                }
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }

            // 查询和选择 角色 列表初始化
            $('#roles').multipleSelect({
                width: '100%',
                placeholder: "-- 选择用户类型 --",
                selectAllText: "全选",
                filter: true, //查询
                countSelected: '已选中 # 个',
                allSelected: '全选'
            });
            getRole();
            function getRole(){
                var str = '';
                $.ajax({
                    url: contextPath + "/Role/queryRole",
                    type: "get",
                    cache: false,
                    dataType: "json",
                    success: function(data){
                        for(var i = 0, len = data.length;i<len;i++){
                            str += '<option value='+ data[i].id +'>'+ data[i].name +'</option>';
                        }
                        $("#roles").html(str);
                        $('#roles').multipleSelect('refresh');
                    },
                    error: function(data){
                        toastr.error("请求失败，请稍后再试!");
                    }
                });
            }
            // 转化为json格式
            function arrayToJson(formArray){
                var dataArray = {};
                $.each(formArray,function(){
                    if(dataArray[this.name]){
                        if(!dataArray[this.name].push){
                            dataArray[this.name] = [dataArray[this.name]];
                        }
                        dataArray[this.name].push(this.value || '');
                    }else{
                        dataArray[this.name] = this.value || '';
                    }
                });
                return JSON.stringify(dataArray);
            }
            // 新建
            $('#save').on('click',function(){
                var userName = $("#userName").val();
                var passWord = $("#passWord").val();
                var displayName = $("#displayName").val();
                var authType = $("#authType").val();
                var userTitle = $("#userTitle").val();
                var organizationName = $("#organizationName").val();
                if($.trim(userName) == '' || $.trim(passWord) == '' || $.trim(displayName) == '' || authType == null || $.trim(userTitle) == '' || $.trim(organizationName) == ''){
                    toastr.error('创建失败！','用户信息不全，请补充完整！');
                    return;
                }
				var formArray = $("#add_form").serializeArray();
                var organizationId = orgData.id,
                    organizationCode = orgData.organizationCode;
                var datas = {};
                    datas.name = 'organizationId';
                    datas.value = organizationId;
                var orgCode = {};
                    orgCode.name = 'organizationCode';
                    orgCode.value = organizationCode;
                var rolesId = $('#roles').multipleSelect('getSelects');
                for(var i = 0,len = rolesId.length; i<len; i++){
                    var obj = {};
                        obj.id = rolesId[i];
                    rolesId[i] = obj;
                };
                var roles = {};
                    roles.name = 'roles';
                    roles.value = rolesId;
                formArray.push(datas,orgCode,roles);
                var formData = arrayToJson(formArray);
                $.ajax({
                    url: contextPath + '/user/addUser',
                    type: 'POST',
                    data: formData,
                    contentType: "application/json",
                    success: function (data) {
                        if(data.code == 1){
                            toastr.success('创建成功！');
                            $('#add_form')[0].reset();
				            $('#organizationName').val('');
                            getZtree();
                            location.hash = "platform-userGroup-user";
                        }else{
                            toastr.error('创建失败！',data.message);
                        }
                    },
                    error: function () {
                        toastr.error("操作失败，请稍后再试！");
                    } 
				});
			});

            // 取消
            $('#cancel').on('click',function(){
				$('#add_form')[0].reset();
                $('#organizationName').val('');
                orgData = '';
			});
        </script>
    </div>
</body>
</html>